﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Table</title>
		<link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="css/global.css" media="all">
		<link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/table.css" />
		<script type="text/javascript" src="../my/js/HOST.js"></script>
	</head>
	<body>
		<div class="admin-main">
			<blockquote class="layui-elem-quote">
				<a href="javascript:;" class="layui-btn layui-btn-sm" id="add">
					<i class="layui-icon">&#xe608;</i> 添加信息
				</a>
				<a href="#" class="layui-btn layui-btn-sm" id="import">
					<i class="layui-icon">&#xe608;</i> 导入信息
				</a>
				<a href="#" class="layui-btn layui-btn-sm">
					<i class="fa fa-shopping-cart" aria-hidden="true"></i> 导出信息
				</a>
				<!--<a href="#" class="layui-btn layui-btn-sm" id="getSelected">-->
					<!--<i class="fa fa-shopping-cart" aria-hidden="true"></i> 获取全选信息-->
				<!--</a>-->
				<a href="javascript:;" class="layui-btn layui-btn-sm" id="search">
					<i class="layui-icon">&#xe615;</i> 搜索
				</a>
			</blockquote>
			<fieldset class="layui-elem-field">
				<legend>数据列表</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table">
						<thead>
							<tr>
								<th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
								<th>类型</th>
								<th>标签名</th>
								<th>数据值</th>
								<th>描述</th>
								<th>创建日期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="content">
						</tbody>
					</table>
				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="paged" class="page">
				</div>
			</div>
		</div>
		<!--模板-->
		<script type="text/html" id="tpl">
			{{# layui.each(d.value.records, function(index, item){ }}
			<tr>
				<td><input   name="id" type="checkbox" lay-skin="primary"></td>
				<td>{{ item.type ? item.type : ""}}</td>
				<td>{{ item.label ? item.label : "" }}</td>
				<td>{{ item.value ? item.value : "" }}</td>
				<td>{{ item.description ? item.description : "" }}</td>
				<td>{{ item.createDate? new Date(parseInt(item.createDate) ).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ") : ""}}</td>
				<td>
					<a href="javascript:;" data-id="{{ item.id }}" data-opt="edit" class="layui-btn layui-btn-xs">编辑</a>
					<a href="#" data-id="{{ item.id }}" data-opt="del" class="layui-btn layui-btn-danger layui-btn-xs">删除</a>
					<a href="/detail-1" target="_blank" class="layui-btn layui-btn-normal layui-btn-xs">预览</a>
				</td>
			</tr>
			{{# }); }}
		</script>
		<script type="text/javascript" src="plugins/layui/layui.js"></script>
		<script type="text/javascript" src="js/Global.js"></script>
		<script>
			layui.config({
				base: 'js/'
			}).extend({
				busajax: 'busajax'
			});

			layui.use(['paging', 'form', 'busajax'], function() {
				var $ = layui.jquery,
						bajax = layui.busajax,
					paging = layui.paging(),
					layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
					layer = layui.layer, //获取当前窗口的layer对象
					form = layui.form();
				var datas={
					page: {
						current: "1"
					}
				}
                paging.init({
                    openWait: true,
                    url: HOST+  'system.dict.getDictByPage.hsr', //地址
					elem: '#content', //内容容器
					params:datas,
					type: 'POST',
					tempElem: '#tpl', //模块容器
					pageConfig: { //分页参数配置
						elem: '#paged', //分页容器
						pageSize: 10 //分页大小
					},
					success: function() { //渲染成功的回调
						//alert('渲染成功');
					},
					fail: function(msg) { //获取数据失败的回调
						//alert('获取数据失败')
					},
					complate: function() { //完成的回调
						//alert('处理完成');
						//重新渲染复选框
						form.render('checkbox');
						form.on('checkbox(allselector)', function(data) {
							var elem = data.elem;

							$('#content').children('tr').each(function() {
								var $that = $(this);
								//全选或反选
								$that.children('td').eq(0).children('input[type=checkbox]')[0].checked = elem.checked;
								form.render('checkbox');
							});
						});

						//绑定所有编辑按钮事件						
						$('#content').children('tr').each(function() {
							var $that = $(this);
							$that.children('td:last-child').children('a[data-opt=edit]').on('click', function() {
//								layer.msg($(this).data('name'));
								console.log($(this).data('id'));
								edit($(this).data('id'));
							});
							$that.children('td:last-child').children('a[data-opt=del]').on('click', function () {

//                        layer.msg($(this).data('name'));
                                var _this = $(this);
                                layer.confirm('您确定要删除吗?', {
                                    btn: ['确定','取消'], //按钮
                                    shade: false //不显示遮罩
                                }, function(index){
                                    // 提交表单的代码，需要你自己写，然后用 layer.close 关闭就可以了，取消可以省略
                                    var dict = {
                                        dict: {
                                            id: _this.data('id')
                                        }
                                    };
//                                    console.log(JSON.stringify(dict));
                                    bajax.busajax('system.dict.delete', dict, null);
                                    layer.close(index);
                                });
							});

						});

					},
				});
				//获取所有选择的列
				$('#getSelected').on('click', function() {
					var names = '';
					$('#content').children('tr').each(function() {
						var $that = $(this);
						var $cbx = $that.children('td').eq(0).children('input[type=checkbox]')[0].checked;
						if($cbx) {
							var n = $that.children('td:last-child').children('a[data-opt=edit]').data('name');
							names += n + ',';
						}
					});
					layer.msg('你选择的名称有：' + names);
				});

				$('#search').on('click', function() {
					parent.layer.alert('你点击了搜索按钮')
				});

				var addBoxIndex = -1;
				$('#add').on('click', function() {
					if(addBoxIndex !== -1)
						return;
					//本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
					$.get('form/dictAdd.html', null, function(form) {
						addBoxIndex = layer.open({
							type: 1,
							title: '添加表单',
							content: form,
							btn: ['保存', '取消'],
							shade: false,
							offset: ['100px', '30%'],
							area: ['600px', '400px'],
							maxmin: true,
							yes: function(index) {
								//触发表单的提交事件
								$('form.layui-form').find('button[lay-filter=edit]').click();
							},
							full: function(elem) {
								var win = window.top === window.self ? window : parent.window;
								$(win).on('resize', function() {
									var $this = $(this);
									elem.width($this.width()).height($this.height()).css({
										top: 0,
										left: 0
									});
									elem.children('div.layui-layer-content').height($this.height() - 95);
								});
							},
							success: function(layero, index) {
								//弹出窗口成功后渲染表单
								var form = layui.form();
								form.render();
								form.on('submit(edit)', function(data) {
									console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
									console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
									console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
									//调用父窗口的layer对象
//									layerTips.open({
//										title: '这里面是表单的信息',
//										type: 1,
//										content: JSON.stringify(data.field),
//										area: ['500px', '300px'],
//										btn: ['关闭并刷新', '关闭'],
//										yes: function(index, layero) {
//											layerTips.msg('你点击了关闭并刷新');
//											layerTips.close(index);
//											location.reload(); //刷新
//										}
//									});
									var dict = {
										dict: data.field
									};
									console.log(JSON.stringify(dict));
									bajax.busajax('system.dict.insertOrUpdate', dict, index, function (result) {

									});
									//这里可以写ajax方法提交表单
									return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。									
								});
								//console.log(layero, index);
							},
							end: function() {
								addBoxIndex = -1;
							}
						});
					});
				});

//				$('#import').on('click', function() {
//					var that = this;
//					var index = layer.tips('只想提示地精准些', that, { tips: [1, 'white'] });
//					$('#layui-layer' + index).children('div.layui-layer-content').css('color', '#000000');
//				});
				var editBoxIndex = -1;
				function edit(id) {
					if (editBoxIndex !== -1)
						return;
					//本表单通过ajax加载 --以模板的形式，当然你也可以直接写在页面上读取
					$.get('form/dictEdit.html', null, function (form) {
						editBoxIndex = layer.open({
							type: 1,
							title: '编辑用户',
							content: form,
							btn: ['保存', '取消'],
							shade: false,
							offset: ['100px', '30%'],
							area: ['600px', '400px'],
							maxmin: true,
							yes: function (index) {
								//触发表单的提交事件
								$('form.layui-form').find('button[lay-filter=edit]').click();
							},
							full: function (elem) {
								var win = window.top === window.self ? window : parent.window;
								$(win).on('resize', function () {
									var $this = $(this);
									elem.width($this.width()).height($this.height()).css({
										top: 0,
										left: 0
									});
									elem.children('div.layui-layer-content').height($this.height() - 95);
								});
							},
							success: function (layero, index) {
								var dictEdit = {
									dict: {
										id:id
									}
								};
								var form = layui.form();
								//这里可以写ajax方法获取表单
								bajax.busajax('system.dict.get', dictEdit, index, function (result) {
									$('form.layui-form').find('input[name=type]').val(result.value[0].type);
									$('form.layui-form').find('input[name=label]').val(result.value[0].label);
									$('form.layui-form').find('input[name=value]').val(result.value[0].value);
									$('form.layui-form').find('input[name=description]').val(result.value[0].description);
									$('form.layui-form').find('input[name=sort]').val(result.value[0].sort);
									$('form.layui-form').find('input[name=id]').val(result.value[0].id);
									console.log(JSON.stringify(result));
								},false);
								//弹出窗口成功后渲染表单
								form.render();
								form.on('submit(edit)', function (data) {
									console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
									console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
									console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
									var dict = {
										dict: data.field
									};
									console.log(JSON.stringify(dict)) //当前容器的全部表单字段，名值对形式：{name: value}

									//这里可以写ajax方法提交表单
									bajax.busajax('system.dict.insertOrUpdate', dict, index, function (result) {

									})
									return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
								});
								//console.log(layero, index);
							},
							end: function () {
								editBoxIndex = -1;
							}
						});
					});

				}
			});
		</script>
	</body>

</html>